<!--
 * @Descripttion: 模具信息
 * @LastEditors: xzh
 * @LastEditTime: 2023-11-12 22:51:33
-->
<template>
  <el-card class="el-card-bottom-top">
    <template #header>
      <span>{{ $t("page.moldManageArr.moldArchivesArr.moldInfo") }}</span>
      <el-button
        v-if="!editModel"
        type="success"
        text
        :icon="Edit"
        @click="editModel = true"
        >{{ $t("table.btnArr.edit") }}</el-button
      >
    </template>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="5.5rem"
      size="large"
    >
      <el-col :span="12">
        <el-form-item
          :label="$t('page.moldManageArr.moldArchivesArr.code') + ':'"
        >
          <el-input
            v-if="!!editModel"
            v-model="formData.code"
            readonly
            :placeholder="$t('common.enter')"
          />
          <span v-else>{{ formData.code }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          :label="$t('page.moldManageArr.moldArchivesArr.name') + ':'"
          prop="name"
        >
          <el-input
            v-if="!!editModel"
            v-model="formData.name"
            :placeholder="$t('common.enter')"
          />
          <span v-else>{{ formData.name }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          :label="$t('page.moldManageArr.moldArchivesArr.specification') + ':'"
        >
          <el-input
            v-if="!!editModel"
            v-model="formData.specification"
            :placeholder="$t('common.enter')"
          />
          <span v-else>{{ formData.specification }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          :label="$t('page.moldManageArr.moldType') + ':'"
          prop="typeId"
          :validate-status="!!formData.typeId ? 'success' : ''"
        >
          <!-- 输入框选择对象 -->
          <DileInputSelectItem
            v-if="!!editModel"
            v-model="formData.typeId"
            :selectType="selectTypeEnum.moldType"
            :cacheLabel="formData.extJson.typeName"
            :expand-on-click-node="false"
          />
          <span v-else>{{ formData.extJson.typeName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="$t('page.systemManageArr.position') + ':'">
          <el-select
            v-if="!!editModel"
            v-model="formData.positionId"
            :placeholder="$t('common.select')"
          >
            <el-option
              v-for="item in resoure.positionArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span v-else>{{ formData.extJson.positionName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item :label="$t('common.remark') + ':'">
          <el-input
            v-if="!!editModel"
            v-model="formData.remark"
            :rows="5"
            type="textarea"
          />
          <span v-else>{{ formData.remark }}</span>
        </el-form-item>
      </el-col>
    </el-form>
    <div v-if="!!editModel" class="info-btnArr">
      <el-button text @click="editModel = false">{{
        $t("common.cancel")
      }}</el-button>
      <el-button type="success" @click="hanldeSure">{{
        $t("common.define")
      }}</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { selectTypeEnum } from "@/components/dile-selectItem/index.type";
import { Edit } from "@element-plus/icons-vue";
import { useI18n } from "vue-i18n";
import DileInputSelectItem from "@/components/dile-selectItem/selectItem-input/index.vue";
const emit = defineEmits(["sure"]);
let props = defineProps({
  formData: {
    type: Object,
    default: {},
  },
  resoure: {
    type: Object,
    default: {},
  },
});
let { t } = useI18n();
/**
 * @Author: xzh
 * @Descripttion: 表单实例
 * @Param:
 */
let formRef = ref<any>(null);

/**
 * @Author: xzh
 * @Descripttion:表单验证规则
 * @Param:
 * @param {*} computed
 */
let formRules = computed((): any => {
  return reactive({
    name: [
      {
        required: true,
        message:
          t("common.enter") + t("page.moldManageArr.moldArchivesArr.name"),
        trigger: "change",
      },
    ],
    typeId: [
      {
        required: true,
        message: t("common.select") + t("page.moldManageArr.moldType"),
        trigger: "change",
      },
    ],
  });
});
/**
 * @Author: xzh
 * @Descripttion: 保存事件
 * @Param:
 */
let hanldeSure = async () => {
  let valid = await formRef.value.validate();
  if (!valid) {
    return false;
  }
  //触发刷新回调
  emit("sure");
};

/**
 * @Author: xzh
 * @Descripttion: 编辑模式
 * @Param:
 */
let editModel = ref<boolean>(false);
</script>
<style lang="scss" scoped>
.info-btnArr {
  display: flex;
  justify-content: center;
}
</style>
